<template>
	<span class="h-checkbox">
		<label>
			<span v-if="beforeText" v-html="beforeText" class="h-checkbox-before-text"></span>
			<input type="checkbox" :name="name" v-model="checked"/>
			<span class="iconfont icon-test h-checkbox-show"></span>
			<span v-if="afterText" v-html="afterText" class="h-checkbox-after-text"></span>
		</label>
	</span>
</template>

<script>
	export default {
		name: "Checkbox",
		props: {
			name: {
				type: String
			},
			value: {
				type: [String, Number, Boolean]
			},
			beforeText: {
				type: String
			},
			afterText: {
				type: String
			}
		},
		computed: {
			checked: {
				get() {
					return this.value;
				},
				set(value) {
					this.$emit('input', value);
					this.$emit('change', value);
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@function pr($px) {
		@return $px/(1080/375)/50*1rem;
	}

	.h-checkbox {
		label {
			position: relative;
			display: inline-flex;
			align-items: center;
			input {
				opacity: 0;
				width: 0;
			}
			input + .h-checkbox-show {
				box-sizing: border-box;
				width: pr(50);
				height: pr(50);
				line-height: pr(54);
				font-size: pr(50);
				border: 1px solid #d4d4d4;
				border-radius: 50%;
				margin: 0 pr(35);
				&:before {
					content: none;
				}
			}
			input:checked + .h-checkbox-show {
				background: #ab2929;
				color: #FFF;
				border: none;
				&:before {
					content: "\e665";
				}
			}
		}
	}
</style>
